<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>better-scroll</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			ul,li{
				list-style: none;
				list-style-position: outside;
			}
			.slider{
				position: relative;
				overflow: hidden;
			}
			.slider-list .slider-list__item{
				float: left;
			}
			.slider-list .slider-list__item img{
				width: 100%;
			}
			/* 指示器 */
			.slider-indicator{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 30px;
				text-align: center;
				pointer-events: none;
				z-index: 2;
			}
			.slider-indicator__btn{
				width: 12px;
				height: 12px;
				display: inline-block;
				background-color: rgba(255,255,255,0.5);
				border-radius: 50%;
			}
			.slider-indicator__btn--selected{
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="slider">
			<ul class="slider-list">
				<li class="slider-list__item"><img src="./images/demo8.jpg" ></li>
				<li class="slider-list__item"><img src="./images/demo8.jpg" ></li>
				<li class="slider-list__item"><img src="./images/demo8.jpg" ></li>
				<li class="slider-list__item"><img src="./images/demo8.jpg" ></li>
			</ul>
			<div class="slider-indicator">
				<span class="slider-indicator__btn slider-indicator__btn--selected"></span>
				<span class="slider-indicator__btn"></span>
				<span class="slider-indicator__btn"></span>
				<span class="slider-indicator__btn"></span>
			</div>
		</div>
		
		<script src="bscroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			(function(){
				//1-获取dom 
				let slider = document.querySelector('.slider');
				let sliderList = slider.querySelector('.slider-list');
				let sliderW = document.body.offsetWidth;
				let sliderIndicator = slider.querySelectorAll('.slider-indicator .slider-indicator__btn');
				
				//2- 实例化bscroll
				let bScroll = new BScroll(slider,{
					scrollY:false,
					scrollX:true,
					snap:{
						loop:true
					}
				})
				
				// 3-设置元素的宽度
				let sliderItem = sliderList.querySelectorAll('.slider-list__item');
				sliderList.style.width = sliderItem.length*sliderW + 'px'
				sliderItem.forEach(item=>{
					item.style.width = sliderW + 'px'
				})
				// 4-dom变化，刷新
				bScroll.refresh();
				// 5-监听滚动结束,设置指示器
				bScroll.on("scrollEnd",function(){
					// 获取当前页面索引
					var pageX = bScroll.getCurrentPage().pageX;
					// 移除class
					document.querySelector('.slider-indicator__btn--selected').classList.remove('slider-indicator__btn--selected')
					// 添加class
					sliderIndicator[pageX].classList.add('slider-indicator__btn--selected')
				})
			})()
		</script>
	</body>
</html>
